<template>
    <div class="page">
        <div class="page-header flex-row flex-item">
            <el-radio-group v-model="network" size="small" class="left-btn" @change="refresh">
                <el-radio-button v-for="item in networks" :label="item.value" :key="item.value">{{ item.label }}</el-radio-button>
            </el-radio-group>
            <div class="flex1"></div>
            <el-button v-if="$auth['operation_tpList_batchDelete']" size="small" @click="deleteBatch" :disabled="!ids.length">批量删除</el-button>
            <el-button v-if="$auth['operation_tpList_addModel']" size="small" type="primary" @click="addTemp">新增模板</el-button>
        </div>
        <tz-table
                ref="tzTable"
                highlight-current-row
                size="mini"
                @selection-change="selectChange"
                :data="loadData">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    prop="modelName"
                    show-overflow-tooltip
                    label="模板名称">
            </el-table-column>
            <el-table-column
                    prop="description"
                    show-overflow-tooltip
                    label="备注">
            </el-table-column>
            <el-table-column
                    prop="deviceType"
                    show-overflow-tooltip
                    label="设备分类">
                <template slot-scope="scope">
                    <el-tag size="small" type="success">{{deviceTypeMap[scope.row.deviceType]}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                    prop="createTime"
                    show-overflow-tooltip
                    label="完成时间"
                    :formatter="(row) => {
                        return row.createTime ? moment(row.createTime).format('YYYY-MM-DD HH:mm:ss') : '-'
                     }">
            </el-table-column>
            <el-table-column
                    prop="tag"
                    label="操作">
                <template slot-scope="scope">
                    <el-button @click="queryInfo(scope.row)" size="small" type="text">详情</el-button>
                    <el-button v-if="$auth['operation_tpList_delete']" @click="deleteTemp([scope.row.id])" size="small" type="text">删除</el-button>
                </template>
            </el-table-column>
        </tz-table>
        <el-drawer
                :title="templateInfo.modelName"
                :visible.sync="detailVisible">
            <tempInfo :templateInfo="templateInfo"></tempInfo>
        </el-drawer>
        <el-drawer
                title="新增模板"
                size="800px"
                :visible.sync="addVisible">
            <tempEdit ref="tempEdit"
                      v-if="addVisible"
                      @cancel="addVisible = false"
                      @success="refresh"
                      :templateInfo="templateInfo"></tempEdit>
        </el-drawer>
    </div>
</template>

<script>
import { networks } from '@/assets/dict'
import tzTable from '@/components/tz-table/index';
import moment from 'moment'
import { mapState } from 'vuex'
import tempInfo from './temp/tempInfo'
import tempEdit from './temp/tempEdit'

export default {
  name: 'tpList',
  components: {
    tzTable,
    tempInfo,
    tempEdit
  },
  data() {
    return {
      moment,
      detailVisible: false,
      addVisible: false,
      networks,
      network: 'JZW',
      ids: [],
      templateInfo: {}
    }
  },
  methods: {
    selectChange(items) {
      this.ids = items.map(item => item.id)
    },
    deleteBatch() {
      this.deleteTemp(this.ids)
    },
    queryInfo({ id }) {
      this.$http.get('/evaluate/getModelDetail', {
        params: {
          id
        }
      }).then(res => {
        this.detailVisible = true
        this.templateInfo = res
      })
    },
    deleteTemp(ids) {
      this.$confirm('是否删除所选项').then(res => {
        this.loading = true
        this.$http.post('/evaluate/deleteModel', {
          ids
        }).then(res => {
          this.$TZmessage.success('删除成功')
        }).catch(err => {
          this.$TZmessage.error(err.msg || '删除失败')
        }).finally(() => {
          this.loading = false
          this.refresh()
        })
      }).catch(err => {
        console.log('取消执行')
      })
    },
    addTemp() {
      this.addVisible = true
      this.$nextTick(() => {
        this.$refs.tempEdit.ruleForm.network = this.network
      })
      // this.$router.push({
      //     path: '/operation/template',
      //     query: {
      //         network: this.network
      //     }
      // })
    },
    refresh() {
      this.addVisible = false
      this.$refs.tzTable.refresh(true)
    },
    loadData(params) {
      return this.$http.get('/evaluate/getModelList', {
        params: {
          network: this.network,
          ...params
        }
      }).then(res => {
        return {
          data: res.records || [],
          total: res.total
        }
      }).catch(err => {
        this.$TZmessage.error(err.msg || '获取列表失败')
      })
    },
  },
  computed: {
    ...mapState('dict', ['deviceTypeMap'])
  }
}
</script>

<style lang="scss" scoped>
    .page {
        .page-header {
            padding-bottom: 20px;
        }
    }
</style>